<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 78px;
            height: 78px;
            line-height: 78px;
            text-align: center;
        }
        .avatar {
            width: 78px;
            height: 78px;
            display: block;
        }
    </style>
</head>
<body>
<div id="div">

    <b style="font-size: 15px;">用户信息管理</b>
    <div style="float:right">
        <el-button type="primary" @click="showAddUserView()">新增用户信息</el-button>
    </div>
    <el-table :data="tableData">
        <el-table-column prop="id" label="编号">
        </el-table-column>
        <el-table-column prop="roleName" label="用户类型">
        </el-table-column>
        <el-table-column prop="account" label="账号">
        </el-table-column>
        <el-table-column prop="userName" label="用户名">
        </el-table-column>
        <el-table-column prop="createdTime" label="创建时间">
           <!-- <template slot-scope="scope">
                <span>{{ formatDate(scope.row.createdTime)}}</span>
            </template>-->
        </el-table-column>
        <el-table-column prop="createdUserId" label="创建人ID">
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.currentPage"
            :page-sizes="[4, 5, 8]"
            :page-size="pagination.pageSizes"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total">
    </el-pagination>
    <el-dialog title="添加用户信息" :visible.sync="dialogFormVisible" width="70%">
        <el-form :model="userForm" :rules="rules" ref="userForm" label-width="100px">
            <el-form-item label="账号" prop="account">
                <el-input v-model="userForm.account"></el-input>
            </el-form-item>
            <el-form-item label="用户名" prop="userName">
                <el-input v-model="userForm.userName"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="userForm.password"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass">
                <el-input type="password" v-model="userForm.checkPass"></el-input>
            </el-form-item>

            <el-form-item label="用户类型" prop="userType">
                <el-select v-model="userForm.userType" placeholder="--请选择--">
                    <el-option label="挂号员" value="2"></el-option>
                    <el-option label="收银员" value="4"></el-option>
                    <el-option label="系统管理员" value="1"></el-option>
                    <el-option label="药房医师" value="5"></el-option>
                    <el-option label="门诊医师" value="3"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="就诊科室" prop="departmentId" v-if="userForm.userType==3">
                <el-select v-model="userForm.departmentId"  placeholder="请选择">
                    <el-option
                            v-for="item in departmentList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="用户图像" prop="region">
                <el-upload
                        class="avatar-uploader"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="userForm.headUrl" :src="userForm.headUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('userForm')">保  存</el-button>
                <el-button @click="returnList()">返回列表</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>
</body>
<script type="application/javascript">
    new Vue({
            el: '#div',
            data: {
                tableData: [
                ],
                pagination: {
                    currentPage: 1,
                    pageSize: 4,
                    total: 9
                },
                departmentList:[
                    {id: 1, name: '门诊内科'},
                    {id: 2, name: '门诊外科'},
                    {id: 3, name: '门诊儿科'},
                    {id: 4, name: '门诊眼科'},
                    {id: 5, name: '门诊口腔科'}
                ],
                dialogFormVisible:false,
                userForm: {
                    account: '',
                    userName: '',
                    password: '',
                    checkPass: '',
                    userType: '',
                    headUrl: '',
                    departmentId:''
                },
                rules: {
                    account: [
                        { required: true, message: '账号名不能为空', trigger: 'blur' }
                    ],
                    userName: [
                        { required: true, message: '用户名不能为空', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '密码不能为空', trigger: 'blur' }
                    ],
                    checkPass: [
                        { required: true, message: '密码不能为空', trigger: 'blur' }
                    ],
                    userType: [
                        { required: true, message: '请选择用户类型', trigger: 'change' }
                    ]
                }
            },
            mounted(){
                  this.getUserListByPage();
            },
            methods: {
               /* formatDate(time) {
                    if(time){
                        let datetime = new Date(time);
                        let y = datetime.getFullYear() + '-';
                        let mon=datetime.getMonth()+1;
                        let d =datetime.getDate();
                        if(mon<10){
                            mon = '0'+mon;
                        }
                        mon = mon + '-';
                        if(d<10){
                            d = '0'+d;
                        }
                        return y + mon + d;
                    }
                    return ''
                },*/
                getUserListByPage(){
                    let url="userServlet";
                    let param="method=page&currentPage="+this.pagination.currentPage+"&pageSize="+this.pagination.pageSize;
                    axios.post(url,param).then(resp=>{
                       if(resp.data){
                            this.pagination.total=resp.data.total;
                            this.tableData=resp.data.list;
                       }
                    });
                },
                //功能：改变查询每页显示的条数，pagination组件会自动传递选择的pageSize
                handleSizeChange(pageSize) {
                    this.pagination.pageSize = pageSize;
                    this.getUserListByPage();
                },
                //功能：翻页查询，pagination组件会自动传递当前页号currentPage
                handleCurrentChange(currentPage) {
                    this.pagination.currentPage = currentPage;
                    this.getUserListByPage();

                },
                showAddUserView(){
                    this.dialogFormVisible=true;
                },
                returnList() {
                    this.$refs['userForm'].resetFields();
                    this.dialogFormVisible=false;
                },
                submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            let createdUserId=JSON.parse(sessionStorage.getItem("loginUser")).createdUserId;
                            let url="userServlet";
                            let param="method=addUser&account="+this.userForm.account+
                                "&userName="+this.userForm.userName+
                                "&password="+this.userForm.password+
                                "&userType="+this.userForm.userType+
                                "&createdUserId="+createdUserId;
                            if(this.userForm.departmentId!=''){
                                param+="&departmentId="+this.userForm.departmentId;
                            }
                            axios.post(url,param).then(resp=>{
                                if(resp.data.code==1006){
                                    this.$message({
                                        type: 'success',
                                        message: resp.data.msg
                                    });

                                }else if(resp.data.code==1007){
                                    this.$message({
                                        type: 'warning',
                                        message: resp.data.msg
                                    });
                                }

                            });
                            this.dialogFormVisible=false;
                            this.getUserListByPage();
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },
                //上传成功
                handleAvatarSuccess(res, file) {
                    this.userForm.headUrl = URL.createObjectURL(file.raw);
                },
                //上传前准备
                beforeAvatarUpload(file) {
                    const isJPG = file.type === 'image/jpeg';
                    const isLt2M = file.size / 1024 / 1024 < 2;

                    if (!isJPG) {
                        this.$message.error('上传头像图片只能是 JPG 格式!');
                    }
                    if (!isLt2M) {
                        this.$message.error('上传头像图片大小不能超过 2MB!');
                    }
                    return isJPG && isLt2M;
                }
            }
        }
    );
</script>
</html>